<template>
	<view class="container">
		<view class="user-section">
			<view v-if="nickName" class="user-info">
			  <view class="avatar-wrapper">
			    <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			          <image class="profile-photo" :src="avatarUrl || '../../static/me-profilePhoto.png'"></image>
				</button>
			  </view>          
			  <view class="nickname-section">
			    <text class="nickname">昵称: {{nickName}}</text>
			    <button class="logout-btn" @click="logout">退出登录</button>
			  </view>
			</view>
			<view v-else class="login-section">
				<button class="login-btn" @click="toLogin">点击登录</button>
			</view>
		</view>
		
		<uni-list class="menu-list">
			<uni-list-item class="menu-item" clickable @click="toLogin" thumb="/static/me-point.png" :show-extra-icon="true" showArrow :extra-icon="extraIcon"
				title="我的积分" />
			<uni-list-item class="menu-item" clickable @click="toMyWallet" thumb="/static/me-wallet.png" :show-extra-icon="true" showArrow :extra-icon="extraIcon"
				title="我的钱包" />
			<uni-list-item class="menu-item" thumb="/static/me-order.png" :show-extra-icon="true" showArrow :extra-icon="extraIcon"
				title="我的订单" />
			<uni-list-item class="menu-item" thumb="/static/me-coupon.png" :show-extra-icon="true" showArrow :extra-icon="extraIcon"
				title="我的优惠券" />
			<uni-list-item class="menu-item" clickable @click="toVehicleBind" thumb="/static/me-carAuth.png" :show-extra-icon="true" showArrow
				:extra-icon="extraIcon" title="我的车辆" />
			<uni-list-item class="menu-item" thumb="/static/me-settings.png" :show-extra-icon="true" showArrow :extra-icon="extraIcon"
				title="设置" />
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
		  return {
			extraIcon: {
			  color: '#4cd964',
			  size: '22',
			  type: 'gear-filled'
			},
			nickName: "",
			avatarUrl: null
		  }
		},
		onLoad() {
		  //this.checkLoginStatus();
		},
		onShow() {
			this.checkLoginStatus();
		},
		methods: {
			onChooseAvatar(e) {
				console.log(e)
				const { avatarUrl } = e.detail;
				  this.avatarUrl = avatarUrl; // Vue 中直接赋值
				  uni.setStorageSync("avatarUrl", avatarUrl); // 存储到本地
			},
			toLogin() {
				console.log("跳转向login")
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			checkLoginStatus() {
				let nickName = uni.getStorageSync("nickName");
				let userId = uni.getStorageSync("userId");
				this.avatarUrl=uni.getStorageSync("avatarUrl");
				if (nickName && userId) {
				  this.nickName = nickName;
				}
			  },
			toVehicleBind() {
				uni.navigateTo({
					url:"/pages/myVehicles/myVehicles"
				})
			},
			toMyWallet() {
				uni.navigateTo({
					url:"/pages/myWallet/myWallet"
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync("nickName");
							uni.removeStorageSync("userId");
							uni.removeStorageSync("avatarUrl")
							this.nickName = "";
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
						}
					}
				});
			},
			getUserInfo() {
			  this.$refs["userProfileDialog"].show({
			    desc: "",
			    avatarUrl: {
			      require: false,
			      disable: true,
			    }
			  }).then(res => {
			    this.nickName = res.nickName;
			    wx.login({
			      success: (wxRes) => {
			        let code = wxRes.code;
			        let url = this.$baseUrl + "/user_api/user/wx/login?code=" + code + 
			                 "&nickName=" + this.nickName
			        uni.request({
			          url: url,
			          success: (res) => {
						if(res.data.code == 0){
							let userId = res.data.data;
							uni.setStorageSync("userId", userId);
							uni.setStorageSync("nickName", this.nickName);
							uni.showToast({
							  title: '登录成功',
							  icon: 'success'
							});
						}else{
							uni.showToast({
							  title: '登录失败',
							  icon: 'fail'
							});
						}
			          },
			          fail: (res) => {
			            console.log("服务器端获取openid失败", res);
			            uni.showToast({
			              title: '登录失败',
			              icon: 'none'
			            });
			          }
			        })
			      },
			      fail: (res) => {
			        console.log("获取id失败", res);
			      }
			    })
			  }, err => {
			    console.log("取消");
			  });
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.user-section {
		background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
		padding: 40rpx 0;
		margin-bottom: 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
	}
	
	.avatar-wrapper {
	  margin-bottom: 20rpx;
	  padding-top: 20rpx; // 新增：增加顶部内边距
	}
	
	.profile-photo {
	  width: 150rpx;
	  height: 150rpx;
	  border-radius: 50%;
	  border: 4rpx solid white;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	  display: block; // 确保图片正确布局
	  margin: 0 auto; // 水平居中
	}
	
	.nickname-section {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nickname {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.avatar-btn {
	  background: transparent;
	  padding: 0;
	  margin: 0;
	  border: none;
	  line-height: 1;
	  
	  &::after {
	    border: none;
	  }
	}
	
	.login-section {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
	}
	
	.login-btn {
		background-color: white;
		color: #2575fc;
		font-size: 32rpx;
		border-radius: 50rpx;
		padding: 0 60rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.logout-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		font-size: 28rpx;
		border-radius: 40rpx;
		padding: 0 40rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 20rpx;
		border: 1rpx solid white;
	}
	
	.menu-list {
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.uni-list-item {
		background-color: white;
	}
	.menu-list {
			margin: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			background-color: white;
		}
		
		.menu-item {
			padding: 28rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			transition: all 0.3s ease;
			
			&:active {
				background-color: #f9f9f9;
			}
			
			&:last-child {
				border-bottom: none;
			}
			
			/* 图标样式 */
			.uni-list-item__icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
				
				img {
					width: 100%;
					height: 100%;
				}
			}
			
			/* 文字样式 */
			.uni-list-item__content-title {
				font-size: 32rpx;
				color: #333;
				font-weight: normal;
			}
			
			/* 箭头样式 */
			.uni-list-item__extra {
				.uni-icon-wrapper {
					color: #999;
				}
			}
		}
</style>